import React from 'react';
import {Modal, Button, Form} from 'antd';

class Sousuo extends React.Component{
    constructor(){
        super()
        this.state={
            shuzi:"",
            visible: false,
        }
    }

    // state = {
    //     visible: false ,
    // };

    showModal = () => {
        this.setState({
            visible: true,
            data:"input"
        });
        console.log(this.state)
    };

    handleOk = e => {
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    namevalueChange=(e)=>{
        this.setState({
            shuzi:e.target.value
        })
        console.log(e.target.value)
    }
    render() {
        let {shuzi}=this.state
        //这里的｛｝里面的值需要是 state 里面一样的
        return(
            <div>
                <input onChange={this.namevalueChange}  placeholder='请输入商品id'  type="text"/>
                    <Button type="primary" onClick={this.showModal}>
                        搜索商品
                    </Button>

                    <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        okText="确定添加"

                    >
                        <br/>
                        <Form name="control-ref" onFinish={this.onFinish} className="chaxun"  >
                            <div style={{border:"2px gray solid",width:"100%"}}></div>
                            <h1 align='center' style={{fontSize:20}}>商品信息详情</h1>
                            <Form.Item name="商品编号" label="商品编号" rules={[{ required: true }]}>
                            <h3>{shuzi}</h3>
                            </Form.Item>
                            <Form.Item  name="商品名称" label="商品名称" rules={[{ required: true }]}>
                                <h3>方便面</h3>
                            </Form.Item>
                            <Form.Item name="商品价格" label="商品价格" rules={[{ required: true }]}>
                                <h3 >12.34565984</h3>
                            </Form.Item>
                            <Form.Item  name="商品数量" label="商品数量" rules={[{ required: true }]}>
                                <h3>365</h3>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>


        )
    }
}
export default Sousuo